import React, { Component } from 'react';
import {
	StyleSheet, View, Image, ScrollView, Text, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common.js';
import MethodUtil from '../../../../utils/MethodUtil';

const scale = GLOBAL.SCALE;


export class MarketDetailPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '市场价详情',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};
	constructor(props) {
		super(props);

		this.state = {
		}
	}
	render () {
		let marketData = this.props.navigation.state.params;
		let upDegreen = require('../../../../imgs/my-siter/up.png');
		let downDegreen = require('../../../../imgs/my-siter/down.png');
		return (
			<View style={styles.container}>
				<ScrollView style={[styles.costBox, { marginTop: 10 }]}>
					{marketData ? marketData.map((item, index) => {
						var priceDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(item.priceDate)
						return (
							<View style={styles.costTableHorizontal} key={index}>
								<View style={styles.costTableLeft}>
									<Text style={styles.costTableTitle}>{priceDate}</Text>
									<Text style={[styles.costTableTitle, {
										marginLeft: 5, width: 55,
									}]} numberOfLines={1}>{item.channelName}</Text>
									<Text style={styles.costTableTitle}>{item.regionName}</Text>
								</View>
								<View style={[styles.costTableRight, { justifyContent: 'flex-end', marginRight: 16 }]}>
									<Text style={styles.costTableText}>{MethodUtil.toThousands(item.priceValue)}</Text>
								</View>
								<View>
									{item.rangeIncreaseFlag !== 'UNBIASED' ?
										<View style={[styles.costTableRight, { justifyContent: 'flex-end', marginRight: 16 }]}>
											<Image source={item.rangeIncreaseFlag == 'UP' ? upDegreen : downDegreen} style={styles.priceFlag} />
											<Text style={item.rangeIncreaseFlag == 'UP' ? styles.tableUpText : styles.tableDownText}>{item.rangeIncrease * 100}%</Text>
										</View>
										: <View style={{ justifyContent: 'flex-end', marginRight: 16 }}>
											<Text>-</Text>
										</View>
									}
								</View>
							</View>
						)
					}) : null
					}
				</ScrollView>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#FFFFFF',
	},
	costBox: {
		backgroundColor: '#F4F7FE',
		borderRadius: 6,
		paddingTop: 8,
		paddingBottom: 17,
		marginHorizontal: 10
		// height: 500
	},
	costTableHorizontal: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 14,
		paddingLeft: 15,
	},
	costTableLeft: {
		width: 156 * scale,
		flexDirection: 'row',
		alignItems: 'center',
	},
	costTableRight: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
	},
	costTable: {
	},
	costTableTitle: {
		opacity: 0.8,
		fontSize: 11,
		color: '#000000'
	},
	costTableRed: {
		fontSize: 10,
		color: '#FB0404',
		fontWeight: 'bold',
		marginLeft: 5,
		marginRight: 5
	},
	costTableLine: {
		height: 1,
		backgroundColor: '#979797',
		opacity: 0.45,
		marginTop: 5,
	},
	costTableType: {
		backgroundColor: '#FBEFE8',
		borderRadius: 2,
		paddingHorizontal: 6,
		paddingVertical: 3,
		marginLeft: 5
	},
	costTableTypeText: {
		fontSize: 10,
		color: '#FA6400',
	},
	costTableBottom: {
		marginTop: 9,
		flexDirection: 'row',
		justifyContent: 'flex-end',
		paddingRight: 20
	},
	costTableBottomText: {
		fontSize: 11
	},
	costTableBottomTextRed: {
		fontSize: 11,
		color: '#FB0404',
	},
	modeType: {
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		marginRight: 10,
		backgroundColor: '#F7B500'
	},
	modeTypeSale: {
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		marginRight: 10,
		backgroundColor: '#3E7406'
	},
	modeTypeText: {
		fontSize: 11,
		color: '#FFFFFF'
	},
	costTableRightTitle: {
		opacity: 0.8,
		fontSize: 12,
		color: '#000'
	},
	priceFlag: {
		width: 9,
		height: 7
	},
	tableUpText: {
		fontSize: 10,
		color: '#E02020'
	},
	tableDownText: {
		fontSize: 10,
		color: '#56C910'
	},
	costTableText: {
		fontSize: 12
	}
})